<template>
  <div class="add-wrap" v-loading="loading">
    <Breadcrumb :titles="titles"></Breadcrumb>
    <div class="body">
      <div class="body-left1">
        <div class="detail-title">
          {{ detail.projectName }}
        </div>
        <div class="detail-item">
          <div class="detail-item-name">项目编号：</div>
          <div class="detail-item-value">
            {{ detail.projectNo }}
          </div>
        </div>
        <div class="detail-item">
          <div class="detail-item-name">项目分类：</div>
          <div class="detail-item-value">
            {{
              getDictLabel(
                detail.projectType,
                projectTypeOptions
              )
            }}
          </div>
        </div>
        <div class="detail-item">
          <div class="detail-item-name">四大结构调整：</div>
          <div class="detail-item-value">
            {{
              getDictLabel(
                detail.projectSdjg,
                projectStructOptions
              )
            }}
          </div>
        </div>
        <div class="detail-item">
          <div class="detail-item-name">细分类型：</div>
          <div class="detail-item-value">
            {{
              getDictLabel(
                detail.xflx,
                projectDivisionOptions
              )
            }}
          </div>
        </div>
        <div class="detail-item">
          <div class="detail-item-name">建设周期：</div>
          <div class="detail-item-value" v-if="detail.jszq">
            {{ JSON.parse(detail.jszq)[0] }} 至
            {{ JSON.parse(detail.jszq)[1] }}
          </div>
        </div>
        <div class="detail-item">
          <div class="detail-item-name">资金来源：</div>
          <div class="detail-item-value">
            {{
              getDictLabel(
                detail.zjly,
                projectCapitalOptions
              )
            }}
          </div>
        </div>
        <div class="detail-item">
          <div class="detail-item-name">用地面积：</div>
          <div class="detail-item-value">
            {{ detail.ydmj || 0 }}亩
          </div>
        </div>
        <div class="detail-item">
          <div class="detail-item-name">建设规模：</div>
          <div class="detail-item-value">
            {{ detail.jsgm }}
          </div>
        </div>
        <div class="detail-item">
          <div class="detail-item-name">建设单位：</div>
          <div class="detail-item-value">
            {{ detail.ssdw }}
          </div>
        </div>
        <div class="detail-item">
          <div class="detail-item-name">勘察单位：</div>
          <div class="detail-item-value">
            {{ detail.kcdw }}
          </div>
        </div>
        <div class="detail-item">
          <div class="detail-item-name">设计单位：</div>
          <div class="detail-item-value">
            {{ detail.sjdw }}
          </div>
        </div>
        <!-- <div class="detail-item">
          <div class="detail-item-name">施工单位：</div>
          <div class="detail-item-value">
            {{ detail.sgdw }}
          </div>
        </div> -->
        <div class="detail-button">
          <el-button @click="handleDetail" class="submit"
            >查看详情</el-button
          >
        </div>
      </div>
      <div class="body-left">
        <div class="project-part-title project-part-title1">
          效果图
        </div>
        <div class="body-content">
          <div
            class="body-left-item"
            :class="{ active: currentPicture === index }"
            v-for="(item, index) of pictureList"
            :key="index"
            @click="handleClickPicture(index)"
          >
            <el-image
              :src="getImage(item.effectPicture.pictureId)"
            />
            <!-- :preview-src-list="
                detail.map((item) =>
                  getImage(item.effectPicture.pictureId)
                )
              " -->
          </div>
        </div>
      </div>
      <div class="body-right">
        <div class="project-part-title project-part-title1">
          进度图时间轴
        </div>
        <div
          class="body-content"
          v-if="pictureList[currentPicture]"
        >
          <el-timeline>
            <el-timeline-item
              :timestamp="`${item.year}年${item.month}月`"
              placement="top"
              v-for="(item, index) of pictureList[
                currentPicture
              ].planRelVoList"
              :key="index"
            >
              <div class="body-right-imgs">
                <el-image
                  v-for="(
                    img, indexs
                  ) of item.planPictureList"
                  :key="indexs"
                  :src="getImage(img.planPictureId)"
                  :preview-src-list="
                    item.planPictureList.map((i) =>
                      getImage(i.planPictureId)
                    )
                  "
                />
              </div>
            </el-timeline-item>
          </el-timeline>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Breadcrumb from '@/components/breadcrumb'
import {
  queryEffectPicture,
  queryProjectDetail
} from '@/api/projectMessage'
import { queryOptions } from '@/api/dict'
import { getDictLabel } from '@/utils/dict'
import { securityFileUrl } from '@/api/wisdomBuild'
export default {
  props: {
    pkid: String,
    title: String
  },
  components: {
    Breadcrumb
  },
  data() {
    return {
      detail: {},
      pictureList: [],
      loading: false,
      currentPicture: 0,
      projectTypeOptions: [],
      projectStructOptions: [],
      projectDivisionOptions: [],
      projectCapitalOptions: []
    }
  },
  computed: {
    titles() {
      return [this.title]
    }
  },
  mounted() {
    this.getAllOptions()
    this.getPictureInfo()
    this.getProjectDetail()
  },
  methods: {
    getDictLabel,
    // 展示图片
    getImage(pkid) {
      return securityFileUrl(pkid)
    },
    handleClickPicture(index) {
      this.currentPicture = index
    },
    // 所有选项
    getAllOptions() {
      queryOptions(
        'projectType,projectSdjg,xflx,zjly'
      ).then((res) => {
        if (res.success) {
          // 项目分类
          this.projectTypeOptions = res.data.filter(
            (i) => i.dictCode === 'projectType'
          )[0].resourceDictItems

          // 四大结构调整
          this.projectStructOptions = res.data.filter(
            (i) => i.dictCode === 'projectSdjg'
          )[0].resourceDictItems

          // 细分类型
          this.projectDivisionOptions = res.data.filter(
            (i) => i.dictCode === 'xflx'
          )[0].resourceDictItems

          // 资金来源
          this.projectCapitalOptions = res.data.filter(
            (i) => i.dictCode === 'zjly'
          )[0].resourceDictItems
        }
      })
    },
    // 获取项目详情
    getPictureInfo() {
      this.loading = true
      queryEffectPicture(this.pkid).then((res) => {
        if (res.success) {
          this.pictureList = res.data
        }
        this.loading = false
      })
    },
    // 获取详情
    getProjectDetail() {
      queryProjectDetail(this.pkid).then((res) => {
        if (res.success) {
          this.detail = res.data.project
        }
      })
    },
    // 查看详情
    handleDetail() {
      this.$router.push({
        path: '/wisdomConstruction/messageManagement/form',
        query: {
          pkid: this.pkid,
          isView: true,
          isCheck: false,
          title: '查看'
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '~@/assets/css/form.scss';
.add-wrap {
  .body {
    display: flex;
    align-items: center;
    padding: 0;
    &-left1 {
      width: 360px;
      height: 100%;
      border-right: 1px solid #f1f1f1;
      box-sizing: border-box;
      padding: 17px 28px;
      overflow-y: auto;
      .detail-title {
        font-size: 16px;
        font-weight: 500;
        color: #4c565c;
        width: 100%;
        margin-bottom: 16px;
      }
      .detail-item {
        width: 100%;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        margin-bottom: 15px;
        &-name {
          min-width: 70px;
          font-size: 14px;
          font-weight: 400;
          color: #000000;
        }
        &-value {
          font-size: 14px;
          font-weight: 400;
          color: #4c565c;
        }
      }
      .detail-button {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        .submit {
          width: 104px;
          height: 34px;
          color: white;
          background: #497fa3;
          border: 1px solid #497fa3;
          border-radius: 2px;
          font-size: 14px;
          font-family: PingFang SC;
          font-weight: 400;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
    &-left {
      width: 310px;
      height: 100%;
      border-right: 1px solid #f1f1f1;
      box-sizing: border-box;
      padding: 10px;
      display: flex;
      flex-direction: column;
      &-item {
        width: 280px;
        height: 200px;
        margin-bottom: 20px;
        cursor: pointer;
        position: relative;
        &.active {
          &::before {
            position: absolute;
            content: ' ';
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            border: 5px solid #497fa3;
            top: 0;
            left: 0;
            z-index: 99;
          }
        }
        .el-image {
          width: 100%;
          height: 100%;
        }
      }
    }
    &-right {
      flex: 1;
      height: 100%;
      box-sizing: border-box;
      padding: 10px;
      display: flex;
      flex-direction: column;
      &-imgs {
        display: flex;
        flex-wrap: wrap;
        .el-image {
          width: 280px;
          height: 200px;
          margin-right: 10px;
          margin-bottom: 10px;
        }
      }
    }
    &-content {
      width: 100%;
      flex: 1;
      overflow-y: auto;
    }
  }
}
</style>
